iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 26

Day_26: 讓 Vite 來開啟你的Vue之 跌入深坑_ 我該用 reactive 還是 ref

  • 分享至 

  • xImage
  •  

Hi Dai Gei Ho~ 我是 Winnie ~

在接下來最後三篇文章中,我們將要進入 Vue跌坑主題系列,而這系列會來介紹下 自己之前在學習Vue時所碰過的問題。
就像學騎腳踏車一樣,摔過痛過如果留下疤痕,下次在看到就會知道要怎麼避開。

在今天的文章中,要來說說 當我們要來定義資料時 是要先使用 ref 還是 reactive呢?

首先,其實這個沒有誰是絕對正確的答案,主要還是需要依照 資料狀態 來判斷使用 :

假如 今天單純要定義一個 基本型別 的響應資料,所以很簡單的我們可以使用 接受任何型態資料的ref()來包裝,再透過.value 來讀取值。

範例如下:

  const count = ref(0); 
  const isShow = ref(false); 
  

但如果 資料 的型別為 物件 或是陣列的時候,情況又會不一樣了,先讓我們來看看以下範例

 const person1 = ref({
     name: 'winnie' 
 })
 
  const person2 = reactive({
     name: '大俠愛吃漢堡飽' 
 })
 
 onMounted(()=>{
     console.log(person1.value.name) //ref()
     console.log(person2.name) //reactive()
 })
 

從以上程式碼,我們可以看到 在語法上 ref 需要透過.value來取物件中的值,而在寫法上就需要用到三層了,而 reactive 只需用物件取值的方式,所以在寫法只需要兩層。

另外我們再來看看 以下另一個範例:

    // App.vue
    const name = ref('winnie')
    const age = ref(24)
    const address = ref('桃園')
    const setName = ()=>{
        name.value = '大俠愛吃漢堡飽'
    }
    
    
    provide('name',name)
    provide('age',age)
    provide('address',address)
    // 略..

    // user.vue

    const name=inject('name')
    const address=inject('address')
    const age=inject('age')
 
    // 略..

從上我們可以看到 當 有一筆user資料 要provide 給多個子元件引用時, 如果我們透過ref()一一來定義,好像會顯得元件中的相關資料太分散了,而且在子元件也要呼應來定義,當程式碼一多也就容易導致錯誤,易讀性變低。而如果我們改成 reactive來進行包裝的話 就可以把相關資料定義在物件之中,在provide出去,不僅很方便,同時還可以減少資料分散的問題。

範例如下:

 const userData = reactive({
    name :'winnie',
    age :24,
    address :'桃園',
 })
 provide('user',userData);

總結以上,針對兩個 響應式資料定義的方法中,以我個人選擇 ,在 單純資料狀態使用上 我會使用ref來進行響應式資料包裝,而如果是 物件或陣列 的型別 ,我多半會使用 reactive 來進行包裝,總歸一樣還是要看當下 資料狀態關聯 來選擇你要如何使用。

以上就是今天文章,如有問題歡迎大家多多指教,謝謝大家。

-- 小記事 --

今天無意間看了自己六年前FaceBook的動態回顧,只想對當時的我說 幸好我也沒辜負高中時的你...

最後附上 高三時 我每天反覆看的影片 陳綺貞 天天想你


上一篇
Day_25: 讓 Vite 來開啟你的Vue 之 讓肝變彩色的 給力 Vite & Vue 相關套件
下一篇
Day_27:讓 Vite 來開啟你的Vue之 跌入深坑偶像劇_ v-if & v-for 他倆不能在一起啊
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言